<template>
	<view class="questionnaire-content">
		<image src="https://pic.imgdb.cn/item/630580a016f2c2beb137e7c4.png" mode="widthFix" class="top-bg"></image>
		<CustomNav :custom="custom" title="问卷调查" :isBack="true" backColor="#fff" :topBgColor="topBgColor"
			:color="'#fff'"></CustomNav>
		<view :style="'margin-top:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+40)+'rpx'" class="detail-block">
			<view class="title">瓜州营商环境问卷调查</view>
			<view class="describe">
				您好！当前瓜州县正在开展优化营商环境突出问题集中政治，此次问卷调查主要想了解您对瓜州县营商环境的评价，为瓜州县委、县政府改善营商环境提供意见和建议。非常感谢您的支持！在此我们承诺，这个调查问卷完全匿名，绝不会泄露您个人或者贵公司的任何信息。
			</view>
			<view class="questionnaire-block">
				<block v-for="(item,index) in questionnaire" :key="item.id">
					<template v-if="item.status!=0">
						<view class="questionnaire-title">{{item.name}}</view>
						<view class="option-block">
							<block v-if="item.choice===1">
								<checkbox-group @change="checkboxChange($event,index)">
									<view v-for="(item1,index1) in item.option" :key="item1.id" class="option-item">
										<template v-if="item1.status!=0">
											<checkbox :id="'checkbox_'+index+'_'+index1" color="#086df3"
												class="form-ctrl" :value="index1" :checked="item1.selected">
											</checkbox>
											<label :for="'checkbox_'+index+'_'+index1"
												class="option-name">{{item1.name}}</label>
										</template>
									</view>
								</checkbox-group>
							</block>
							<block v-else>
								<radio-group @change="changeRadio($event,index)">
									<view v-for="(item1,index1) in item.option" :key="item1.id" class="option-item">
										<template v-if="item1.status!=0">
											<radio :id="'radio_'+index+'_'+index1" color="#086df3" :value="index1"
												:checked="item1.selected" class="form-ctrl"></radio>
											<label :for="'radio_'+index+'_'+index1"
												class="option-name">{{item1.name}}</label>
										</template>
									</view>
								</radio-group>
							</block>
						</view>
					</template>
				</block>
			</view>
			<view class="form-block">
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>手机号</view>
					<input placeholder-class="inputPlaceholder" v-model="form.mobile" disabled="disabled" />
				</view>
				<!-- <view class="form-item">
					<view class="form-label"><text class="require">*</text>匿名提交</view>
					<radio-group @change="changeRadio">
						<radio color="#086df3" value="否"></radio>否
						<radio color="#086df3" value="是"></radio>是
					</radio-group>
				</view> -->
			</view>
		</view>
		<view class="btn normal" @click="submit">确认提交</view>
	</view>
</template>

<script>
	import {
		getQuestionnaire,
		questionnaireSaveApi
	} from '@/api/lighthouse.js'
	import {
		getStorage
	} from '@/util/auth'
	export default {
		data() {
			return {
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				questionnaire: [],
				form: {
					mobile: '',
					//radio: ''
				},
			}
		},
		methods: {
			changeRadio(e, clickIndex) {
				this.questionnaire[clickIndex].option.map((item, index) => {
					item.selected = e.detail.value == index;
				})
			},
			checkboxChange(e, clickIndex) {
				this.questionnaire[clickIndex].option.map((item, index) => {
					item.selected = e.detail.value.includes(index.toString());
				})
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getQuestionnaire().then(data => {
					uni.hideLoading()
					this.questionnaire = data.question
				}).catch(() => {
					uni.hideLoading()
				})
			},
			submit() {
				let result = true;
				for (let i = 0; i < this.questionnaire.length; i++) {
					let current = this.questionnaire[i];
					let res = false;
					for (let q = 0; q < current.option.length; q++) {
						if (current.option[q].selected) {
							res = true;
							break;
						}
					}
					if (!res) {
						result = false;
						//提示
						this.showToast(`请将第${i+1}个问题选择完整`)
						break;
					}
				}
				if (result) {
					uni.showLoading({
						title: '提交中',
						mask: true
					});
					let form = JSON.parse(JSON.stringify(this.questionnaire));
					questionnaireSaveApi({
						userId: getStorage('login').id,
						json: form
					}).then((res) => {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 1000,
							mask: true,
							success: function() {
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/home/home'
									})
								}, 1000)
							},
						})
					}).catch((res) => {
						uni.hideLoading()
						this.showToast('提交失败');
					})
				}
			},
		},
		onPageScroll(e) {
			if (e.scrollTop >= 1) {
				//this.topBgColor='linear-gradient(to right,#656ef9,#7f3ee4)'
				this.topBgColor = '#086df3'
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		onLoad() {
			this.custom = this.utils.getCustomNavData();
			this.getList()
		},
		onShow() {
			const loginInfo = getStorage('login');
			this.form.mobile = loginInfo.mobile;
		}
	}
</script>

<style lang="scss" scoped>
	.questionnaire-content {
		overflow: hidden;

		.top-bg {
			width: 100%;
			position: absolute;
		}

		.detail-block {
			position: relative;
			width: calc(100% - 40rpx);
			margin: 0 auto;
			padding: 30rpx;
			background: #fff;
			border-radius: 12rpx;
			box-shadow: 0 0 10px 0px #e8e8e8;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;

			.title {
				display: flex;
				justify-content: center;
				color: $uni-color-primary;
				font-weight: bold;
			}

			.describe {
				font-size: 30rpx;
				text-align: justify;
				margin-top: 30rpx;
			}

			.questionnaire-block {
				display: flex;
				flex-direction: column;
				margin-top: 50rpx;

				.questionnaire-title {
					font-weight: bold;
					font-size: 30rpx;
				}

				.option-block {
					margin: 30rpx 0;
					display: flex;
					flex-direction: column;
					border: 1px solid #efefef;
					border-radius: 5px;

					.option-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						min-height: 90rpx;
						padding: 10rpx 0;
						font-size: 28rpx;
						border-bottom: 1px solid #efefef;

						.form-ctrl {
							transform: scale(0.7);
							margin: 0 20rpx;
						}
					}

					.option-item:last-child {
						border-bottom: none;
					}
				}
			}

			.form-block {
				display: flex;
				flex-direction: column;

				.form-item {
					display: flex;
					flex-direction: column;
					border-bottom: 1px solid #efefef;
					font-size: 28rpx;

					.form-label {
						margin-top: 20rpx;
					}

					input {
						margin: 20rpx 0;
					}

					radio {
						transform: scale(0.7);
						margin: 20rpx 0;
					}
				}
			}
		}

		.btn {
			width: calc(100% - 40rpx);
			margin: 0 auto;
			margin-bottom: 30rpx;
		}
	}
</style>